<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
		 #div1 {
		   width: 100px;
		   height: 100px;
		   background: red;
		   position: absolute;
		   left: 200px; top: 200px;
		 }
		</style>
	</head>
	<body>
    <div id="div1"></div>
    <script>
    
    var oDiv = document.getElementById('div1');
    
    oDiv.onmousedown = function(ev){
      
      var disX = ev.clientX;
      var disY = ev.clientY;
      var iWidth = oDiv.offsetWidth;
      var iHeight = oDiv.offsetHeight;
      var iR = this.offsetLeft + iWidth - 5 < disX;
      var iB = this.offsetTop + iHeight - 5 < disY;
      var iL = disX - this.offsetLeft < 5;
      var iT = disY - this.offsetTop < 5;
      var offleft = oDiv.offsetLeft;
      var offtop = oDiv.offsetTop

      
      document.onmousemove = function(ev){
        
        var w = ev.clientX - disX;
        var h = ev.clientY - disY;
        
        var lw = disX - ev.clientX;
        var lh = disY - ev.clientY;
        
        // console.log( w );
        if( iR ){
          
          oDiv.style.width = iWidth + w + 'px';
          
        }
        
        if( iB ){
          
          oDiv.style.height = iHeight + h + 'px';
          
        }
        
        if (iL){

          if(iWidth + lw >= 0){

        		oDiv.style.width = iWidth +lw + 'px';

        		  oDiv.style.left = -lw + offleft + 'px';
          }
        }
        if(iT){
            if(iHeight + lh >= 0){

        		oDiv.style.height = iHeight + lh + 'px';
        		oDiv.style.top = -lh + offtop +'px';
            }
        }
        
      };
      
      document.onmouseup = function(){
        
        document.onmousemove = null;
        
      };
      
      
    };
    
    /*
     
     练习：实现八方向都可以拖拽调整尺寸大小。 
      
    */

    </script>
	</body>
</html>
